Molte volte vedo designer che creano decine di classi, ognuna per uno stile, ma non si limitano a questo, ad esempio se ci devono essere due box identici, ma con il colore di sfondo diverso creano due classi specifiche per ogni box.

Come ovviare allora a questa soluzione, funzionante, ma a mio parere poco elegante?

Vediamo l'esempio:

<div class="box">
<h5>Titolo del Box</h5>
Questo box &egrave; solamente un'esempio!
<a>Leggi tutto...</a>
</div>
<div class="box">
<h5>Titolo del Box</h5>
Questo box &egrave; solamente un'esempio!
<a>Leggi tutto...</a>
</div>

Tralasciando l'utilità di questo esempio, come si nota dal codice ho creato due fantasiosi (!!) box ai quali ho dato la medesima classe, box.

Adesso vediamo il suo codice CSS:

div.box {
background: #efefef;
border-top: 6px solid #ddd;
border-bottom: 12px solid #ccc;
width: 150px;
height: 100px;
padding: 3px 10px 3px 10px;
margin-bottom: 10px;
}
div.box h5 {
margin: 0 0 10px 0;
text-transform: uppercase;
}
div.box a {
display: block;
text-align: right;
margin-top: 30px;
}

anche qua, non mi sono sforzato molto con la fantasia, ma è solamente un'esempio.
Quindi, ho creato il css del box; adesso, i due bocchi sono identici. Ma cosa accade se devo creare gli stessi box ma di colore diverso? Devo riscrivere tutta la classe? No.

Basta mettere una classe aggiuntiva al box che avrà il colore diverso, preceduta da uno spazio, ad esempio:

<div class="box blue">

a questo punto creo una classe chiamata blue dove andrò a dichiarare solamente il colore:

div.blue {
background: #D7E3FD;
border-top: 6px solid #6699FF;
border-bottom: 12px solid #C6D9F2;
color: #5566bb;
}

In questo modo il browser interpreterà tutte e due le classi ereditando e modificando le regole come specificato nel nostro foglio di stile.